/**
 * @功能描述: 抽屉组件demo
 * @author: lzn
 * @date: 2022-09-30 14:53:38
 * @version: 1.0
 */
<script setup>
import { ref } from 'vue';
import YwDrawer from './index.vue';

const placement = ref();
const visible = ref(false);

function showDrawer(direction) {
  placement.value = direction;
  visible.value = true;
}

function closeDrawer() {
  visible.value = false;
}
</script>

<template>
  <div>
    <button class="yw-btn" @click="showDrawer('left')">YwLeftDrawer</button>
    <button class="yw-btn" @click="showDrawer('right')">YwRightDrawer</button>
    <button class="yw-btn" @click="showDrawer('top')">YwTopDrawer</button>
    <button class="yw-btn" @click="showDrawer('bottom')">YwBottomDrawer</button>
  </div>
  <yw-drawer 
    title="Basic Drawer" 
    :placement="placement" 
    :open="visible"
    :onClose="closeDrawer"
  >
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </yw-drawer>

</template>

<style scoped>
button {
  margin: 0 10px 10px 0;
}
</style>